<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>交互式电子技术手册</title>
  <link rel="icon" type="image/svg+xml" href="/img/company_log.png" />
  <link href="lib/layui.css" rel="stylesheet" />
  <link href="lib/multimedia.css" rel="stylesheet" />
  <style>
    html {
      margin: 0;
      padding: 0;
    }

    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      line-height: 1.6;
      background: #d9e6ed;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin: 0;
      font-weight: normal;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    ul {
      list-style: none;
    }

    button {
      cursor: pointer;
    }

    ::-webkit-scrollbar-thumb {
      background-color: #0003;
      border-radius: 10px;
      transition: all .2s ease-in-out;
    }

    ::-webkit-scrollbar-track {
      border-radius: 10px;
    }

    ::-webkit-scrollbar {
      width: 6px;
    }

    .layui-layer-dialog .layui-layer-content {
      color: #000;
    }

    .layui-layer-hui .layui-layer-content {
      z-index: 999;
      color: #fff;
    }

    .shuoding_box {
      display: none;
    }

    .shuoding_box {
      display: none;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      position: fixed;
      align-items: center;
      justify-content: center;
      background-color: #525252;

      font-size: 30px;
      z-index: 999;
      color: #fff;
    }

    .shuoding_box ._left {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }

    .shuoding_box ._right {
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: #fff;
      border-radius: 10px;
      padding: 20px;
      color: #000;
      font-size: 16px;
      margin-left: 40px;
    }

    .shuoding_box input {
      margin-top: 15px;
      padding: 6px 7px;
      border: 1px #959595 solid;
    }

    #shuoding_box_password:-internal-autofill-previewed,
    #shuoding_box_password:-internal-autofill-selected {
      -webkit-text-fill-color: #000000 !important;
      font-size: 16px !important;
    }

    .shuoding_box button {
      margin-top: 10px;
      border: 1px solid #959595;
      font-size: 14px;
      padding: 2px 0;
    }

    .shuoding_box img {
      margin-bottom: 20px;
      width: 180px;
      height: 180px;
    }

    .home-page {
      height: 100vh;
      background-color: #fff;
    }

    .page-header {
      height: 85px;
      background-position-y: 10px;
      background: url('./img/muen_header_bg.png') no-repeat center center;
      background-size: 100% 100%;
      position: relative;
      background-position-y: -5px;
    }

    .page-header .nav_list {
      position: absolute;
      top: 10px;
      right: 0;
      width: 98.8%;
      height: 45px;
      z-index: 10;
      display: flex;
      justify-content: center;
    }

    .nav_list .kong {
      width: 24%;
    }

    .nav_list .history {
      position: relative;
    }

    .nav_list ._left {
      background-image: url("./img/kuai_left_bg.png");
      background-size: 100% 100%;
      width: 10.59%;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      font-size: 16px;
      cursor: pointer;
    }

    .nav_list ._right {
      background-image: url("./img/kuai_right_bg.png");
      background-size: 100% 100%;
      width: 10.59%;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      font-size: 16px;
      cursor: pointer;
    }

    .nav_list li:nth-child(1) {
      transform: translateX(40px);
    }

    .nav_list li:nth-child(2) {
      transform: translateX(20px);
    }

    .nav_list li:nth-child(3) {
      transform: translateX(0px);
    }

    .nav_list li:nth-child(5) {
      transform: translateX(0px);
    }

    .nav_list li:nth-child(6) {
      transform: translateX(-20px);
    }

    .nav_list li:nth-child(7) {
      transform: translateX(-42px);
    }

    .btn_box {
      user-select: none;
      position: absolute;
      z-index: 11;
      right: 50px;
      max-width: 130px;
      top: 17px;
      padding: 5px 15px;
      background: #f2f2f2;
      border-radius: 23px;
      cursor: pointer;
    }

    .nav_list ._right:hover,
    .nav_list ._left:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .quxian {
      text-decoration: none !important;
    }

    .quxian ._qian:hover,
    .quxian ._tui:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .btn_box span {
      display: block;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #000;
      font-size: 14px;
      margin-right: 5px;
    }

    .logout-box {
      display: none;
      position: absolute;
      width: 70px;
      top: 120%;
      right: 0;
      padding: 7px 12px;
      background: #f2f2f2;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      z-index: 10;
    }
    .logout-box .layui-btn{
      margin-left: 0px !important;
    }
    .logout-box .layui-btn+.layui-btn{
      margin-top: 5px;
    }
    .btn_box:hover .logout-box {
      display: block;
    }

    .logout-box::after {
      content: '';
      position: absolute;
      top: -13px;
      right: 37px;
      border-width: 7px;
      border-style: solid;
      border-color: transparent transparent #f2f2f2 transparent;
    }

    .logout-box::before {
      content: '';
      position: absolute;
      top: -13px;
      right: 0;
      width: 100%;
      height: 30px;
      display: block;
      background: transparent;
    }

    .header-content {
      position: absolute;
      left: 51.3%;
      top: 33%;
      transform: translate(-50%, -50%);
      text-align: center;
    }

    .header-content h1 {
      color: #fff;
      font-size: 26px;
      margin: 0;
      white-space: nowrap;
      font-weight: bold;
    }

    .manual-container {
      padding: 30px 40px 0;
      overflow-y: auto;
      height: calc(100% - 85px);
      box-sizing: border-box;
    }

    .manual-container .imgts {
      width: 100%;
      height: 60%;
      position: fixed;
      background: url('./img/home_bg.png');
      bottom: 0;
      left: 0;
      z-index: 0;
    }

    .manual-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 40px;
      max-width: 1450px;
      margin: 0 auto;
      z-index: 1;
      position: relative;
    }

    .manual-item {
      display: flex;
      justify-content: center;
      padding: 15px;
      transition: transform 0.3s ease;
    }

    .manual-book {
      text-align: center;
      cursor: pointer;
      position: relative;
    }
    .manual-book .before {
      position: absolute;
      top: 50px;
      right: 22px;
      width: 24px;
      display: none;
      height: 20px;
      fill: #f4fffc;
      /* background-image: url(./img/remove.png); */
      /* background-size: 100% 100%; */
    }

    .manual-book>h3 {
      position: absolute;
      bottom: 45px;
      left: 50%;
      transform: translateX(-50%);
      color: #fff;
      font-size: 16px;
      font-weight: bold;
      color: #fff;
    }

    .manual-book img {
      width: 250px;
      height: 300px;
      object-fit: cover;
      transition: box-shadow 0.3s ease;
    }

    .manual-book img.book_icon {
      position: absolute;
      top: 38%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80px;
      height: 80px;
    }

    /* .manual-book:hover img { */
    /* box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07); */
    /* border-radius: 20px; */
    /* } */

    .suoding {
      position: absolute;
      right: 146px;
      max-width: 40px;
      top: 12px;
      border-radius: 23px;
      cursor: pointer;
    }

    .suoding img {
      width: 100%;
    }

    .nav_list .history #history_list {
      display: none;
      position: absolute;
      max-height: 400px;
      overflow-y: auto;
      width: 300px;
      right: -18%;
      top: 50px;
      /* border-radius: 20px; */
      /* padding: 10px 0; */
      background-color: #ffffff;
      padding-bottom: 10px;
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07);
    }

    .nav_list .history #history_list:focus-visible {
      outline: none;
    }

    .nav_list .history #history_list .title_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      background: #a4deff;
      width: 300px;
      position: fixed;
      box-sizing: border-box;
    }

    .nav_list .history #history_list .title_box>p {
      margin: 5px 0;
    }

    .nav_list .history #history_list .title_box .delete_span {
      width: 60px;
      font-size: 14px;
      padding: 3px 5px;
    }

    .nav_list .history #history_list .level {
      padding: 0 20px;
      width: 100%;
      display: flex;
      align-items: center;
      margin-top: 8px;
      box-sizing: border-box;
      cursor: pointer;
    }

    .nav_list .history #history_list .level:nth-child(2) {
      margin-top: 60px;
    }

    .nav_list .history #history_list .tree_span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      width: 100%;
      margin-right: 5px;
      text-align: left;
    }

    .nav_list .history #history_list .ico_docu {
      background: url("./img/docu.png");
      background-size: 15px;
      background-repeat: no-repeat;
      width: 15px;
      height: 15px;
      display: inline-block;
      margin-right: 5px;
    }

    .nav_list .history #history_list .delete_span {
      width: 45px;
      font-size: 12px;
      color: #fff;
      border-radius: 3px;
      padding: 2px 1px;
      height: 100%;
      background-color: #ff0000;
      text-align: center;
      display: inline-block;
      cursor: pointer;
    }

    .nav_list .remarks #remarks_list {
      display: none;
      position: absolute;
      max-height: 400px;
      overflow-y: auto;
      width: 500px;
      right: -18%;
      top: 50px;
      /* border-radius: 20px; */
      /* padding: 10px 0; */
      background-color: #ffffff;
      padding-bottom: 10px;
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07);
    }

    .nav_list .remarks #remarks_list:focus-visible {
      outline: none;
    }

    .nav_list .remarks #remarks_list .title_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      background: #a4deff;
      width: 500px;
      position: fixed;
      box-sizing: border-box;
    }
    /* .nav_list .remarks #remarks_list a:hover {
      color: #000;
    } */
    .nav_list .remarks #remarks_list .title_box>p {
      margin: 5px 0;
    }

    .nav_list .remarks #remarks_list .title_box .delete_span {
      width: 60px;
      font-size: 14px;
      padding: 3px 5px;
    }

    .nav_list .remarks #remarks_list .level {
      padding: 0 20px;
      width: 100%;
      display: flex;
      align-items: center;
      margin-top: 8px;
      box-sizing: border-box;
      cursor: pointer;
    }

    .nav_list .remarks #remarks_list .level:nth-child(2) {
      margin-top: 60px;
    }

    .nav_list .remarks #remarks_list .tree_span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      width: 100%;
      margin-right: 5px;
      text-align: left;
    }

    .nav_list .remarks #remarks_list .ico_docu {
      background: url("./img/docu.png");
      background-size: 15px;
      background-repeat: no-repeat;
      width: 15px;
      height: 15px;
      display: inline-block;
      margin-right: 5px;
    }

    .nav_list .remarks #remarks_list .delete_span {
      width: 45px;
      font-size: 12px;
      color: #fff;
      border-radius: 3px;
      padding: 2px 1px;
      height: 100%;
      background-color: #ff0000;
      text-align: center;
      display: inline-block;
      cursor: pointer;
    }

    .xiexian {
      font-size: 26px;
      padding: 0 8px;
      color: #c7daf5;
      /* transform: rotateZ(320deg); */
    }
  </style>
</head>

<body>
  <div id="app">
    <router-view></router-view>
    <div class="shuoding_box" id="shuoding_box">
      <div class="_left">
        <img src="./img/pmshuoding.png" alt="">
        <p>屏幕已锁定</p>
      </div>
      <div class="_right">
        <p id="id_user_name">123465</p>
        <input type="password" name="" id="shuoding_box_password" autocomplete="new-password" placeholder="请输入密码"
          oninput="this.value = this.value.trim()" />
        <button onclick="loginX()">解锁</button>
      </div>
    </div>
  </div>

  <!-- 引入 Vue 2 -->
  <script src="lib/vue.min.js"></script>
  <!-- 引入 Vue Router 3 -->
  <script src="lib/vue-router.min.js"></script>
  <script src="lib/layui/layui.all.js"></script>
  <script src="lib/jquery-2.1.0.min.js"></script>
  <script src="lib/hammer.min.js"></script>
  <script src="lib/multimedia.js"></script>
  <script src="js/components/login.js"></script>
  <script src="js/components/home.js"></script>
  <script src="js/components/details.js"></script>

  <script>
    // location.replace('127.0.0.1:8585' + '/#/login');
    // return;
    let username = localStorage.getItem('username');
    if (username) {
      $('#id_user_name').text(username);
    }
    let isLocking = sessionStorage.getItem('isLocking');
    if (isLocking && isLocking === 'true') {
      $('#shuoding_box').css({ 'display': 'flex' });
    } else {
      $('#shuoding_box').css({ 'display': 'none' });
    }

    function loginX() {
      console.log('点击解锁');
      let username = localStorage.getItem('username');
      let password = $('#shuoding_box_password').val();
      if (!password || !password.trim()) {
        layer.msg('请输入密码 !');
        return;
      }
      $.ajax({
        type: "POST",
        url: '/ietm/login',
        data: {
          "username": username,
          "password": password,
        },
        // dataType: "JSON",
        success: function (res) {
          if (res.code == 200) {
            sessionStorage.setItem('isLocking', '');
            $('#shuoding_box').css({ 'display': 'none' });
            $('#shuoding_box_password').val('');
          } else {
            if (res.msg.includes('失败')) {
              layer.msg('密码错误 !');
            } else {
              layer.msg('密码错误 !');
            }
          }
        }, error: function (res) {
          layer.msg('密码错误 !');
        }
      })

    }
    // 添加 cookie 检查函数
    function getCookie(name) {
      const value = `; ${document.cookie}`;
      const parts = value.split(`; ${name}=`);
      if (parts.length === 2) return parts.pop().split(';').shift();
      return null;
    }
    // 创建路由对象
    const routes = [
      { path: '/', component: ComponentLogin },
      { path: '/home', component: ComponentHome },
      { path: '/login', component: ComponentLogin },
      { path: '/details', component: ComponentDetails }
    ];

    // 创建 Vue Router 实例
    const router = new VueRouter({
      routes // (缩写) 相当于 routes: routes
    });


    // 修改 Vue Router 实例的 push 方法
    // const originalPush = router.push;
    // router.push = function (location, onResolve, onReject) {
    //   if (onResolve || onReject) {
    //     return originalPush.call(this, location, onResolve, onReject);
    //   }
    //   return originalPush.call(this, location).catch((err) => {
    //     // 处理错误，比如防止重复跳转的错误
    //     if (err.name === 'NavigationDuplicated') {
    //       console.warn('NavigationDuplicated error caught.');
    //       return err; // 或者返回其他处理逻辑
    //     }
    //     throw err; // 抛出其他错误
    //   });
    // };

    /// 检查登录状态并跳转的函数
    function checkLoginStatus() {
      const token = sessionStorage.getItem('systemToken');
      const currentPath = router.currentRoute.path;

      if (token && currentPath !== '/home') {
        router.push('/home').catch(err => {
          if (err.name !== 'NavigationDuplicated') {
            throw err;
          }
        });
      } else if (!token && currentPath !== '/login') {
        router.push('/login').catch(err => {
          if (err.name !== 'NavigationDuplicated') {
            throw err;
          }
        });
      }
    }


    // 路由守卫也需要相应修改
    router.beforeEach((to, from, next) => {
      const token = sessionStorage.getItem('systemToken');
      if (to.path !== '/login' && !token) {
        if (from.path !== '/login') {  // 避免重复跳转
          next('/login');
        } else {
          next(false);
        }
      } else if (to.path === '/login' && token) {
        if (from.path !== '/home') {  // 避免重复跳转
          next('/home');
        } else {
          next(false);
        }
      } else {
        next();
      }
    });

    // 路由守卫也需要相应修改
    // router.beforeEach((to, from, next) => {
    //   const token = getCookie('systemToken');
    //   if (to.path !== '/login' && !token) {
    //     if (from.path !== '/login') {  // 避免重复跳转
    //       next('/login');
    //     } else {
    //       next(false);
    //     }
    //   } else if (to.path === '/login' && token) {
    //     if (from.path !== '/home') {  // 避免重复跳转
    //       next('/home');
    //     } else {
    //       next(false);
    //     }
    //   } else {
    //     next();
    //   }
    // });

    // 创建 Vue 实例
    new Vue({
      el: '#app',
      router,
      mounted() {
        // Vue 实例挂载后检查登录状态
        checkLoginStatus();
        function getCookie(name) {
          const cookieArr = document.cookie.split(';');
          for (let cookie of cookieArr) {
            const [key, value] = cookie.trim().split('=');
            if (key === name) {
              return decodeURIComponent(value);
            }
          }
          return null;
        }
        const jsessionId = getCookie('JSESSIONID');
        console.log(jsessionId, '3829173917391', document.cookie);
      }
    });



    window.wlogout = function () {
      document.cookie = "systemToken=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; // 删除cookie中的token
      sessionStorage.removeItem('systemToken');
      localStorage.removeItem('username');
      localStorage.removeItem('userInfo');
      window.location.reload();
      location.replace(window.location.origin + '/ietmData/#/login');
      // nginx
      // location.replace(window.location.origin + '/#/login');
    }
    console.log(window, 'windowwindowwindowwindow');


  </script>
</body>

</html>